<template>
  <div>
    <el-drawer
      title="充值明细"
      :before-close="handleClose"
      :visible.sync="electorCardDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%"
    >
      <div class="demo-drawer__content">
        <el-table :data="list" v-loading="loading">
          <el-table-column
            property="stationName"
            label="油站名称"
            width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="orderNo"
            label="订单号"
            width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column property="amt" label="充值金额"></el-table-column>
          <el-table-column
            property="customerName"
            label="消费者昵称"
            width="130"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="createTime"
            label="充值时间"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="payType"
            label="订单状态"
            :formatter="payTypeFotmat"
          ></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getChargeDetailApi } from "@/api/customer/dzk_Electroic_Card";
export default {
  name: "DzkElectroicCardChargeList",
  props: {
    electorCardDialog: {
      type: Boolean,
      default: false,
    },
    currentRowData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formLabelWidth: "80px",
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mobilePhone: "",
        enterpriseId: null,
        stationId: null,
      },
      loading: false,
    };
  },
  watch: {
    electorCardDialog(val) {
      if (val) {
        this.getList();
      }
    },
  },
  methods: {
    // 获取充值明细
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      params.mobilePhone = this.currentRowData.mobilePhone;
      params.enterpriseId = this.currentRowData.enterpriseId;
      params.stationId = this.currentRowData.stationId;
      const res = await getChargeDetailApi(params);
      this.total = res.total;
      this.list = res.rows;
      this.loading = false;
      console.log("3333", res);
    },
    handleClose() {
      this.$emit("update:electorCardDialog", false);
    },
    payTypeFotmat(row) {
      //  为空时，属于电子卡支付
      const types = {
        imp: "手动充值",
        msub: "手动扣减",
        wx: "微信充值",
        ref: "充值退款",
        posPr: "POS机赠送",
      };
      return row.payType ? types[row.payType] : "电子卡支付";
    },
  },
};
</script>
